<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>查询页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="query">
            <div class="header">
                <div style="margin: 0 15px;">
                   名称：<el-input size="medium" v-model="form.value" style="width: 200px; margin-right:10px;"
                        placeholder="请输入名称" clearable></el-input>
                    <el-button icon="el-icon-search" size="medium" @click="handleSerach">查询</el-button>
                    <el-button icon="el-icon-upload2" size="medium" type="success" :loading="isExport"
                        @click="handleExport" plain round>批量导出</el-button>
                    <el-button icon="el-icon-setting" size="medium" type="info" plain round
                        @click="dialogFieldVisible = true">设置显示字段</el-button>
                </div>
            </div>
            <el-row class="main" type="flex">
                <el-col :md="19" :sm="16" :xs="24" class="right"><!-- 如果有tabs 高度要调整  -->
                    <el-tabs v-model="form.value2" type="card" @tab-click="handleSerach">
                        <el-tab-pane name="-">
                            <div slot="label" style="display: flex; align-items: center; justify-content: center;">
                                <div
                                    style="width: 10px;height: 10px; display: flex; align-items: center;  margin-right: 10px;">
                                    <div style="width: 100px; height: 10px;background-color: #67C23A;"></div>
                                    <div style="width: 100px; height: 10px;background-color: #F56C6C;"></div>
                                </div>
                                全部
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <div slot="label" style="display: flex; align-items: center; justify-content: center;">
                                <div style="width: 10px;height: 10px;background-color: #67C23A; margin-right: 10px;">
                                </div>
                                启用
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="0">
                            <div slot="label" style="display: flex; align-items: center; justify-content: center;">
                                <div style="width: 10px;height: 10px;background-color: #F56C6C; margin-right: 10px;">
                                </div>
                                禁用
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <el-table id="table" border v-if="isUpdate" height="calc(100% - 103px)"
                        :data-options="JSON.stringify({'tableName':'tracecode_detail','primaryKey':'Tracecode_SerialNumber'})"
                        v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="tableData"
                        @selection-change="handleSelectionChange">
                        <el-table-column align="center" width="55" type="index" label="序号"></el-table-column>
                        <el-table-column :align="column.Column_Align" :min-width="column.Column_Width"
                            :show-overflow-tooltip="column.Overflow == '0'" v-for="column in columns"
                            :key="column.COLUMN_NAME" :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                            <template v-slot="{row}">
                                <div v-if="column.Column_Type=='1'">
                                    <el-image style="width: 100px; height: 100px"
                                        :preview-src-list="[(imageApi + row[column.COLUMN_NAME])]"
                                        :src="imageApi + row[column.COLUMN_NAME]" fit="contain"></el-image>
                                </div>
                                <template v-else>
                                    {{row[column.COLUMN_NAME]}}
                                </template>
                            </template>
                        </el-table-column>
                        
                        <el-table-column align="center" width="90" fixed="right" prop="Row_Status" label="状态">
                            <template v-slot="{row}">
                                <el-tag :type="row.Row_Status == '0'?'danger':'success'">{{row.Row_Status ==
                                    '0'?'禁用':'正常'}}</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" fixed="right" width="163">
                            <template v-slot="{row}">
                                <div style="display: flex; align-items: center;">
                                    <el-button size="small" type="primary" style="margin-right: 10px;"
                                        @click="handleEdit(row)">
                                        查看
                                    </el-button>

                                    <el-dropdown trigger="click" @command="handleCommand($event,row)">
                                        <el-button size="small" type="danger">
                                            更多 <i class="el-icon-arrow-down el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="handleStatus">
                                                {{row.Row_Status == '0'?'启用':'禁用'}}
                                            </el-dropdown-item>
                                            <el-dropdown-item command="handleRemove">
                                                删除
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination style="margin-top: 15px;" :current-page="form.PageNumber" :page-size="form.RowAmount"
                        :page-sizes="[20, 40, 60, 80, 100]" layout="total, sizes, prev, pager, next, jumper" background
                        :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-col>
            <field-config :visible.sync="dialogFieldVisible" @success="getColumn(false)"></field-config>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>